<!-- 设置 界面 -->
<template>
	<view>
		<!-- 用户设置 选择 -->
		<template v-if="loginStatus">
			<uni-list-item title="账号与安全" clickable showArrow @click="open(('user-safe'),true)"></uni-list-item>
			<uni-list-item title="绑定邮箱" clickable @click="open(('user-email'),true)" showArrow></uni-list-item>
			<uni-list-item title="编辑资料" clickable showArrow @click="open('user-userinfo')"></uni-list-item>
		</template>
		<uni-list-item
			title="清除缓存"
			clickable
			showArrow
			@click="clear"
			:rightText="currentSize | format"
		></uni-list-item>
		<uni-list-item title="意见反馈" clickable showArrow @click="open(('user-feedback'),true)"></uni-list-item>
		<uni-list-item v-if="loginStatus" title="关于社区" clickable showArrow @click="open('about')"></uni-list-item>
		<!-- 退出登录 -->
		<view class="py-2 px-3" v-if="loginStatus">
			<button class="bg-main text-white" style="border-radius:50rpx;border:0;" type="primary" @click="loginOut">
				退出登录
			</button>
		</view>
	</view>
</template>

<script>
	// 引入 vuex
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				// 缓存大小
				currentSize: 0,
			};
		},
		// 监听页面加载时
		onLoad() {
			// 调用 同步获取 系统缓存
			this.getStorageInfo();
		},
		// 过滤器
		filters: {
			// 将缓存 kb 转换为mb保留 两位小数
			format(value) {
				/* 如果 缓存大小>1024kb，就让它 除以1024kb.并保留两位小数，
				否则直接让value保留两位小数 */
				return value > 1024 ? (value / 1024).toFixed(2) + 'MB' : value.toFixed(2) + 'KB';
			},
		},
		computed: {
			// 解构赋值 vuex中 state存放的数据
			...mapState({
				// 登录状态
				loginStatus: (state) => state.loginStatus,
			}),
		},
		methods: {
			// 同步获取系统 信息缓存
			getStorageInfo() {
				// 同步获取当前Storage的 详细信息
				let res = uni.getStorageInfoSync();
				this.currentSize = res.currentSize;
			},
			open(path,model) {
				// 跳转 用户 设置一系列页面
				if(model){
					uni.navigateTo({
						url: `../user-model/${path}/${path}`
					});
				}
				// 跳转到 按钮传入的参数页面
				uni.navigateTo({
					url: `../${path}/${path}`,
				});
			},
			// 清除缓存
			clear() {
				if (this.currentSize == 0) {
					uni.showToast({
						title: '暂无缓存可清理',
						icon: 'none',
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否要清除所有缓存？',
					cancelColor: '不清除',
					confirmColor: '清除',
					success: (res) => {
						if (res.confirm) {
							// 同步清理本地 数据缓存
							uni.clearStorageSync();
							// 清除完后，还需要再次调用，获取本地数据缓存
							this.getStorageInfo();
							uni.showToast({
								title: '清除成功',
								icon: 'none',
							});
						}
					},
				});
			},
			// 退出登录
			loginOut() {
				uni.showModal({
					content: '是否要退出登录',
					success: (res) => {
						if (res.confirm) {
							// 调用 vuex中 退出登录方法。
							this.$store.commit('logout');
							// 关闭socket
							this.$store.dispatch('closeSocket');
							// 提示消息，返回上一页
							uni.showToast({
								title: '退出登录成功',
								icon: 'none',
							});
							uni.navigateBack({
								delta: 1,
							});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss"></style>
